<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/detail/detail.css">
    <link rel="stylesheet" href="../../js/swiper/swiper.min.css">
    <title>商品详情</title>
    <style>
        .shop-detail-carsouel{
            overflow: hidden;
        }
        .details-figure-p {
            width: 94%;
            margin: 0 auto;
            font-size: 0.14rem;
            color: #000000;
            font-size: 0.16rem;
        }

        .details-figure-p>* {
            color: #000000;
            font-size: 0.16rem;
        }
        .swiper-container{
            height: 100%;
            overflow: hidden;
        }
        .details-figure-p a {
            color: #000000;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="shop-detail">
        <!-- 详情页star -->
        <div class="head">
            <div class="h-left" @click="tyitu"></div>
            <div class="h-middle">商品详情</div>
            <div class="h-right"></div>
        </div>
        <!-- 详情页end -->
        <!-- 轮播star -->
        <div class="shop-detail-carsouel">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img class="goodsImgs" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 轮播end -->
        <!-- 内容区域star -->
        <!-- 价格展示-->
        <div class="shop-detail-price">
            <span class="shop-new-price">￥888.88</span>
            <span class="shop-original-price">￥88888</span>
        </div>
        <!-- 商品标题 -->
        <div class="shop-commodity-title">
            <p class="commodity"></p>
            <p style="color: #333333;margin-top: .1rem">库存剩余：<span class="kucun"></span></p>
            <!--<p class="commodity-show">A9处理器 国行正品 13仓快速发货</p>-->
        </div>
        <!-- 隔断处 -->
        <p class="shop-detail-filter-p"></p>
        <!-- 送至star -->
        <!--<div class="shop-detail-delivery">-->
        <!--<div class="delivery-left">-->
        <!--<span class="delivery-sapn">送至</span>-->
        <!--</div>-->
        <!--<div class="delivery-middle">-->
        <!--<img src="../../img/shopDetail/delivery.png" alt="">-->
        <!--<div class="shop-detail-address">-->
        <!--&lt;!&ndash;<p class="address-p">河北省 石家庄市 市庄路与泰华街交叉口 东南150米</p>&ndash;&gt;-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="delivery-right">-->
        <!--<span class="delivery-right-more">···</span>-->
        <!--</div>-->
        <!--</div>-->
        <!-- 隔断处 -->
        <!--<p class="shop-detail-filter-p"></p>-->
        <!-- 推荐 -->
        <!--<div class="shop-detail-recommend">-->
        <!--<div class="recommend-top">-->
        <!--<div class="recommend-left">-->
        <!--<img src="../../img/shopcarImg1.png" alt="">-->
        <!--</div>-->
        <!--<div class="recommend-right">-->
        <!--<ul class="recommend-right-ul">-->
        <!--&lt;!&ndash;<li class="recommend-title">东吴丽人（桥西店）</li>&ndash;&gt;-->
        <!--<li class="recommend-evalute"></li>-->
        <!--</ul>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="recommend-bottom">-->
        <!--<p class="recommend-products-title">为你推荐</p>-->
        <!--<div class="recommend-products">-->
        <!--<ul class="recommend-products-ul">-->
        <!--<li>-->
        <!--<img src="../../img/shopcarImg1.png" alt="">-->
        <!--<br>-->
        <!--<p>京选尚品</p>-->
        <!--<span>￥999</span>-->
        <!--</li>-->
        <!--<li>-->
        <!--<img src="../../img/shopcarImg1.png" alt="">-->
        <!--<br>-->
        <!--<p>京选尚品</p>-->
        <!--<span>￥990</span>-->
        <!--</li>-->
        <!--<li>-->
        <!--<img src="../../img/shopcarImg1.png" alt="">-->
        <!--<br>-->
        <!--<p>京选尚品</p>-->
        <!--<span>￥546</span>-->
        <!--</li>-->
        <!--<li>-->
        <!--<img src="../../img/shopcarImg1.png" alt="">-->
        <!--<br>-->
        <!--<p>京选尚品</p>-->
        <!--<span>￥6576</span>-->
        <!--</li>-->
        <!--</ul>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!-- 隔断处 -->
        <!--<p class="shop-detail-filter-p"></p>-->
        <!-- 详情图 -->
        <div class="shop-details-figure">
            <div class="details-figure-title" style="overflow: hidden;">
                <span class="details-figure-span">商品详情</span>
            </div>
            <div class="details-figure-img" style="padding-bottom: 0.2rem;">
                <p class="details-figure-p"></p>
            </div>
        </div>
    </div>
    <div class="detail-footer">
        <div class="footer-left">
            <ul class="shop-detail-store">
                <li>
                    <a class="yiwu_detail">
                        <img src="../../img/shopDetail/store.png" alt="">
                        <br>
                        <span>店铺</span>
                    </a>
                </li>
                <li>
                    <a href="../shopcar/indexShop-yiwu.html">
                        <img src="../../img/shopDetail/shopcar.png" alt="">
                        <br>
                        <span>购物车</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer-right">
            <a class="shop-detail-shopcar" id="addCar" href="javascript:0;" @click="shop">加入购物车</a>
        </div>
    </div>
</div>
<script src="../../js/jquery-2.2.3.min.js"></script>
<script src="../../js/rem.js"></script>
<script src="../../js/common.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
</body>

</html>
<!--<script src="js/cc.js"></script>-->
<script src="../../js/swiper/swiper.min.js"></script>
<script src="layer-v3.1.1/layer/layer.js"></script>
<script>
    var goodsId=0;
    $(function () {

        //获取商品ID
        goodsId = decodeURIComponent(getQueryString("id"));
        var goodsType = decodeURIComponent(getQueryString("goodsType"));
        var theRequest = GetRequest();
        var url = SURL + '/jfd/retailGoods/goodsDetails';
        var swiper = new Swiper('.swiper-container');
        // $('#addCar').onclick(function(){
        //     var url= SURL +'/jfd/cart/addCarts';
        //     var userId=localStorage.getItem('userId');
        //     console.log(userId)
        //     /*$.post(url,{userId:userId,goodsId:goodsId,goodsNum:1,goodsType:''},function(e){
        //
        //     })*/
        // })
        var app = new Vue({
            el: '#app',
            data: {
                goodsId: goodsId
            },
            mounted() {
                if(theRequest.hasOwnProperty('id')) {
                    var goodsId = theRequest.id;
                }else{
                    var goodsId = goodsId;
                }
                this.$http.get(SURL + '/jfd/shopGoods/particulars?goodsId='+goodsId,{
                    emulateJSON: true
                }).then(function (e) {
                        var data=e.body;
                        console.log();
                        $('.details-figure-p').children().css({
                            'color': '#000000',
                            'fontSize': '0.16rem'
                        })
                        $('.yiwu_detail').attr('href','../shopdetails.html?id='+data.shopId)
                        $('.shop-new-price').html('￥' + data.shopPrice);
                        $('.shop-original-price').html('￥' + data.marketPrice);
                        $('.commodity').html(data.goodsName);
                        $('.kucun').html(data.goodsNum);

                    $('.details-figure-img').children('.details-figure-p').html(data.goodsDetails);
                        // var carsouel = '';
                        // if (data.gallery) {
                        //     var gallery = data.gallery.split(',');
                        //     // $.each(gallery, function (i, val) {
                        //     //     if ($.trim(val).length > 0) {
                        //     //         console.log($.trim(val));
                        //     //         carsouel += '<div class="swiper-slide"><img src="' +
                        //     //             val +
                        //     //             '" alt="" style="height: 3.72rem;"></div>';
                        //     //     }
                        //     // })
                        // }
                        // $('.swiper-wrapper').html(carsouel);
                    $('.goodsImgs').attr('src',data.goodsImg);
                })
            },
            methods: {
                shop() {
                    if(theRequest.hasOwnProperty('id')) {
                        var goodsId = theRequest.id
                    }else{
                        var goodsId = goodsId;
                    }
                    this.$http.post(SURL + '/jfd/cart/addCarts', {
                        userId: localStorage.getItem('userId'),
                        goodsId: goodsId,
                        goodsNum: 1,
                        goodsType: 3
                    }, {
                        emulateJSON: true
                    }).then(function (res) {
                        console.log()
                        if (res.body.code == 0) {
                            location.href = '../shopcar/indexShop-yiwu.html'
                        }else{
                            alert(res.body.msg);
                        }
                    })
                },
                tyitu() {
                    window.history.go(-1)
                }
            }
        })
    })

    function GetRequest() {
        //获取url中"?"符后的字串 
        var url = location.search;
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
</script>
